<template>
  <!-- 文字海报位组件属性 -->
  <div class="textposterAttr">
    <div class="comInfo">
      <div class="item1">
        <div class="label">大小：</div>
        <div class="item">
          <div class="infoCon">
            <div class="con" style="margin-right:20px;">
              <span>w：</span>
              <el-input v-model.number="list.style.w" :disabled="disabledType"></el-input>
            </div>
            <div class="con">
              <span>h：</span>
              <el-input v-model.number="list.style.h" :disabled="disabledType"></el-input>
            </div>
          </div>
          <div id="tipMsg" style="marginLeft:25px;color:red;display:none;">组件最大宽度为1133px</div>
        </div>
      </div>
      <div class="item1">
        <div class="label">楼层名称：</div>
        <div class="item">
          <el-input v-model.number="list.floorName" :disabled="disabledType"></el-input>
        </div>
      </div>
      <div class="item1">
        <div class="label">楼层编码：</div>
        <div class="item">
          <div>{{list.floorId}}</div>
        </div>
      </div>
      <div class="item2" :style="{border:list.isShow==0?'none':''}">
        <div class="label">是否换行：</div>
        <div class="item">
          <el-radio-group v-model="list.isShow" :disabled="disabledType">
            <el-radio :label="0">是</el-radio>
            <el-radio :label="1">否</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="item1" v-if="list.isShow==0" >
        <div class="label">海报行数：</div>
        <div class="item">
          <el-input v-model.number="list.detail.rowNum" :disabled="disabledType"></el-input>
        </div>
      </div>
      <div class="item3">
        <el-button class="addBtn" type="primary" size="mini" round :disabled="disabledType" @click="AddItem(list.value)">添加</el-button>
        <div class="infoItem" v-if="list.value.length>0">
          <div class="items" v-for="(item,idx) in list.value" :key="'b'+idx">
            <div class="name">位置{{idx+1}}：</div>
            <div class="con">
              <div>
                <div>海报标题：</div>
                <el-input v-model="item.name" :disabled="disabledType"></el-input>
              </div>
              <div>
                <div>焦点位置：</div>
                <el-input v-model="item.index" :disabled="disabledType"></el-input>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'textposterAttr',
  components: {},
  props: {
    comData: {
      type: Object,
      default: () => {}
    },
    disabledType:{
      type:Boolean,
      default: false
    }
  },
  data() {
    return {
      list: this.comData,
    }
  },
  watch:{
    'list.style':{
      handler(val){
        if(val.w > 1145){
          // this.$message.error('组件宽度最大为1145');
          document.getElementById('tipMsg').style.display = 'block';
          setTimeout(() =>{
            document.getElementById('tipMsg').style.display = 'none';
            this.list.style.w = 1145;
            this.list.style.x = 4;
            this.list.style.y = 5;
          },2000)
        } 
      },
      deep: true,
    },
    'list.value':{
      handler(data){
        data.forEach((item,idx) =>{
          let id = 'tipMsg' + idx;
          // 监听重复值
          // const newArr = data.map(val=>val.name);
          // const isRepeat = newArr.some((item,index,data)=>data.indexOf(item)!=index);
          // if(isRepeat){
          //   document.getElementById(id).innerText = "有重复值，请重新输入";
          //   document.getElementById(id).style.display = 'block';
          //   setTimeout(() =>{
          //     document.getElementById(id).style.display = 'none';
          //   },2000)
          // }
          // 监听不为0
          if(item.index == 0){
            document.getElementById(id).style.display = 'block';
            setTimeout(() =>{
              document.getElementById(id).style.display = 'none';
              item.index = 1;
            },2000)
          }
        })
      },
      deep: true,
    },
    'list.isShow':{
      handler(val){
        if(val == 0){
          let basicH = this.list.style.h0;
          let newH = (basicH * this.list.detail.rowNum) - ((this.list.detail.rowNum - 1 ) * 25);
          this.list.style.h = newH;
        } else {
          let basicH = this.list.style.h0;
          this.list.style.h = basicH;
        }
      },
      deep: true,
    },
    'list.detail.rowNum':{
      handler(val){
        if(this.list.isShow == 0){
          let basicH = this.list.style.h0;
          let newH = (basicH * val) - ((val - 1 ) * 25);
          this.list.style.h = newH;
        }
      },
      deep: true,
    }
  },
  methods: {
    // 添加海报
    AddItem(data){
      this.$emit('AddItemPoster',data)
    },
  }
}
</script>

<style lang="less" scoped>
.textposterAttr{
  .comInfo{
    margin: 10px 5px;
    .item1{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 10px;
      border-bottom: 1px dashed #dbdbdb;
    }
    .item2{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      padding: 10px;
      border-bottom: 1px dashed #dbdbdb;
    }
    .item3{
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      padding: 10px;
      border-bottom: 1px dashed #dbdbdb;
    }
    .label{
      width: 100px;
    }
    .item{
      width: calc(100% - 100px);
      .infoCon{
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: flex-start;
        .con{
          display: flex;
          align-items: center;
          span{
            width: 25px;
          }
        }
      }
    }
    .addBtn{
      width: 60px;
      margin-left: 10px;
    }
    .infoItem{
      display: flex;
      flex-direction: column;
      margin-left: 10px;
      margin-top: 15px;
      .items{
        display: flex;
        flex-direction: row;
        align-items: center;
        margin: 10px;
        padding-bottom: 5px;
        border-bottom: 1px dashed #dbdbdb;
        .name{
          width: 70px;
        }
        .con{
          width: calc(100% - 70px);
          display: flex;
          flex-direction: row;
          align-items: center;
          & div:nth-child(1){
            margin-right: 30px;
          }
        }
      }
    }
  }
}
</style>

<style lang="less" scoped>
/deep/ .el-radio{
  width: 50px !important;
  margin: 15px 0px 10px 5px;
}
</style>